Archives: Add border block support #63400
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
carolinan
added
[Type] Enhancement
|
Size Change: +76 B (0%) Total Size: 1.81 MB
ℹ️ View Unchanged
|
|
Since this block is not used to add design or layout, I am very open to adjusting which controls that should be shown by default. |
carolinan
changed the title
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
carolinan
added
Good First Issue
There was a problem hiding this comment.
Thanks for working on this one @carolinan 👍
At the block instance level this works well for me. Once global styles are added to the mix we'll get double borders in the editor.
This is due to the Archives block using the ServerSideRender component in the editor. It results in the block class being used on both the outer wrapper and the inner render of the block. The outer wrapper is required for block selection etc.
The only complete and elegant solution is to refactor the entire Archives block to use the REST API for data and avoid server side rendering entirely. The benefit here probably doesn't justify the effort at this stage.
An alternative in the short term would be to add some editor only styles to remove any borders, padding etc. on the nested element with the block's class e.g. .wp-block-archives .wp-block-archives.
A simple quick fix was done recently for the Tag Cloud block that suffers from the same issue: #63832.
Adjusts the editor CSS to remove the default margin on the
<UL>used by the block.
The block library styles don't contain this reset on the ul for the frontend. The lack of a margin there appears due to layout styles which a theme may or may not have.
The need to remove it from the editor is due to the server side rendering again. It means the inner block classes get the layout margin. While the ul.wp-block-archives class does effectively target the inner render of the block, it's not clear in the stylesheet that's what is intended.
Since this block is not used to add design or layout, I am very open to adjusting which controls that should be shown by default.
With the combined border controls, I think if it is worth showing any border control by default it should show them all. As you note, the application of borders here is a niche case. I'd vote to make all the border controls on this block optional.
|
Thank you! I completely missed the duplicate borders in my testing. |
aaronrobertshaw
approved these changes
Jul 31, 2024
There was a problem hiding this comment.
Thanks for wrangling this adoption of border support @carolinan 👍
I've given this PR another test and it is working well for me. Nice work!
✅ Global Styles get applied correctly
✅ No duplicate padding or border in the editor due to server-side rendering
✅ Block instance styles override Global Styles
✅ Application of styles are consistent between editors and frontend
✅ Box sizing takes border into account when parent enforces width
Before merging I've left a small improvement as a suggestion below. Also, can you tweak the PR description so that it matches what's actually landing for others belatedly coming to this one?
Screen.Recording.2024-07-31.at.12.07.41.PM.mp4
karthick-murugan
pushed a commit
to karthick-murugan/gutenberg
that referenced
this pull request
Nov 13, 2024
Archives: Add border block support Co-authored-by: carolinan <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Add border block support to the archives block.
Partial for #43247
Why?
The block is missing these options. Adding them improves the consistency and enables more design options.
How?
The PR:
Adds the border block support in block.json, with all controls optional, hidden by default.
Adjusts the editor styles by removing the duplicate spacing and duplicate borders (See the discussion below about why this was needed for this server rendered block, which uses the block class name twice in the markup).
Testing Instructions
Create a new post and add an archives block. Adjust the border settings and compare the result in the editor and front.
Next test the global styles options from the Styles sidebar in the Site Editor.
Screenshots or screencast
After:
|